<template lang="html">
  <div class="container content content-wage" v-loading="loading">
    <div class="content-wage-search"> 
      <el-form :inline="true"  class="demo-form-inline">
              <el-form-item label="会议名称">
                  <el-input v-model="subject"></el-input>
              </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadMeetingList">查询</el-button>
                <el-button type="primary" @click.stop="addGroups">新增会议</el-button>
            </el-form-item>
          </el-form>
    </div>

    <div class="wage-add">
      
      <el-table :data="blocks" style="width: 100%" class="wage-table">
        <el-table-column prop="subject" label="会议名称" width="180">
        </el-table-column>
         :close-on-click-modal="false" <el-table-column prop="sequence" label="排序" width="70">  
        </el-table-column>
        <el-table-column  label="状态" width="100">
          <template slot-scope="scope">
            <p>{{scope.row.status === -1 ? '禁用' : '启用'}}</p>
           </template>
        </el-table-column>
        <el-table-column label="会议群组" width="180">
            <template slot-scope="scope">
                <span >{{ scope.row.groupDTO.groupName}}</span>
            </template>
        </el-table-column>
        <el-table-column label="会议栏目" width="180">
            <template slot-scope="scope">
                <span >{{ scope.row.columnDTO.columnName}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="employeeName" label="创建人" width="120">
        </el-table-column>
        <el-table-column label="操作" width="420">
          <template slot-scope="scope">
            <el-button @click="editModules(scope.row)" type="success" size="small">修改</el-button>
            <el-button @click="editMeetingUser(scope.row)" type="success" size="small">编辑人员</el-button>
            <el-button @click="gotoFile(scope.row)" type="success" size="small">编辑文件</el-button>
            <el-button @click="deleteMeetingFun(scope.row)" type="danger" size="small">删除</el-button>
            <el-button
              v-if="scope.row.status === 0"
              @click="disableMeetingFun(scope.row)"
              type="danger"
              size="small"
              >禁用</el-button>
            <el-button
              @click="enabledMeetingFun(scope.row)"
              type="success"
              size="small"
              v-if="scope.row.status === -1"
              >启用</el-button>
            </template>
        </el-table-column>
      </el-table>

      <div class="wage-add-pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="page"
          :page-size="pageSize"
          @current-change="loadMeetingList"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog :title="titleName" :visible.sync="dialogTableVisible">
        <meeting-add
        v-if="dialogTableVisible"
        :type="type"
        :modules="modules"
        @hascreated="hascreated"
        @cancelAdd="cancelAddFun"
      >
      </meeting-add>
    </el-dialog>
      <el-dialog title="编辑参会人员" :close-on-click-modal="false"  :visible.sync="meetingUserVisible" :before-close="userClear" class="meeting-add-dialog user-dialog">
      <meeting-user v-if="meetingUserVisible" :meeting='modules'   @hascreated="hascreated" :cls="cls" sourceType="meeting" ></meeting-user>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import axios from 'axios';
import storage from '@/assets/js/storage';
import {  createConfig } from '@/assets/js/tools';
//import util from '@/assets/js/util';
import MeetingAdd from '@/components/meetings/MeetingAdd'
import MeetingUser from '@/components/meetings/MeetingUser'
export default {
  name: 'lanlinNews',
  data() {
    return {
      months: [],
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      serialId: '',
      blocks: [],
      type: 'add',
      dialogTableVisible: false,
      meetingUserVisible: false,
      modules: {},
      cls:'',
      subject: ''
    };
  },
  components: {
    MeetingAdd,MeetingUser
  },
  computed: {
    ...mapGetters({
      userInfo: 'getUserInfo',
    }),
    titleName() {
      return this.type === 'add' ? '新增版块' : '编辑版块';
    },
  },
  methods: {
    addGroups() {
      this.type = 'add';
      this.dialogTableVisible = true;
    },
    editModules(modules) {
      this.type = 'edit';
      this.modules = modules;
      this.dialogTableVisible = true;
    },
    hascreated() {
      this.dialogTableVisible = false;
      this.loadMeetingList();
    },
    cancelAddFun() {
      this.dialogTableVisible = false;
    },

    handleClick(row) {
      this.$router.push({
        path: 'card',
        query: row,
      });
    },
    disableMeetingFun(row) {
      this.$confirm('是否禁用该会议?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.disableMeeting(row);
        })
        .catch(() => {});
    },
    disableMeeting(row) {
      this.loading = true;

      let path = '/station/api/meeting/disableMeeting?id=' + row.id + '&ts=' + Date.now();
      let headers = { token: this.userInfo.token };
      axios
        .get(path, {
          params: {},
          headers: headers,
        })
        .then((data) => {
          if (data.data.status === 'SUCCESS') {
            this.$message.success('禁用成功');
            this.loading = false;
            this.loadMeetingList();
          } else {
            this.$message.error('禁用失败');
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error('禁用失败');
          this.loading = false;
          // eslint-disable-next-line no-console
          console.log(err);
        });
    },
    deleteMeetingFun(row) {
      this.$confirm('是否删除该会议?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteMeeting(row);
        })
        .catch(() => {});
    },
    deleteMeeting(row) {
      this.loading = true;
      let path = '/station/api/meeting/deleteMeeting?id=' + row.id + '&ts=' + Date.now();
      let headers = { token: this.userInfo.token };
      axios
        .get(path, {
          params: {},
          headers: headers,
        })
        .then((data) => {
          if (data.data.status === 'SUCCESS') {
            this.$message.success('删除成功');
            this.loading = false;
            this.loadMeetingList();
          } else {
            this.$message.error(data.data.errorMsg? data.data.errorMsg:'删除失败');
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error('删除失败');
          this.loading = false;
          // eslint-disable-next-line no-console
          console.log(err);
        });
    },
      enabledMeetingFun(row) {
      this.$confirm('是否禁用该会议?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.enabledMeeting(row);
        })
        .catch(() => {});
    },
    enabledMeeting(row) {
      this.loading = true;

      let path = '/station/api/meeting/enabledMeeting?id=' + row.id + '&ts=' + Date.now();
      let headers = { token: this.userInfo.token };
      axios
        .get(path, {
          params: {},
          headers: headers,
        })
        .then((data) => {
          if (data.data.status === 'SUCCESS') {
            this.$message.success('启用成功');
            this.loading = false;
            this.loadMeetingList();
          } else {
            this.$message.error(data.data.errorMsg? data.data.errorMsg:'启用失败');
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error('禁用失败');
          this.loading = false;
          // eslint-disable-next-line no-console
          console.log(err);
        });
    },

    loadMeetingList() {
      this.loading = true;
      let param = {
        page: this.page - 1,
        pageSize: this.pageSize,
        title: this.subject
      };
      let path = '/station/api/meeting/pageMeeting?vs=' + Date.now();
      let config = createConfig(this.userInfo.token);
      axios
        .post(path, param, config)
        .then((data) => {
          if (data.data.status === 'SUCCESS') {
            let content = data.data.content;
            if (content && content.content && Array.isArray(content.content)) {
              this.blocks = content.content;
              this.total = content.totalElements;
            }
          } else {
            this.$message.error(
              data.data.errorMsg ? data.data.errorMsg : '获取会议列表出错'
            );
          }
          this.loading = false;
        })
        .catch((err) => {
          // eslint-disable-next-line no-console
          console.log(err);
          this.$message.error('获取会议列表出错');
          this.loading = false;
        });
    },

     userClear(){
      this.cls="change"
      this.meetingUserVisible=false;
    },
    editMeetingUser(meeting){
      this.modules = meeting
      this.meetingUserVisible=true
    },

    gotoFile(meeting) {
      let param = { id: meeting.id, subject:meeting.subject};
      this.$router.push({
        path: "meetingFile",
        query: param
      });
    }
    

  },
  mounted() {
    storage.initUserInfo();
    this.loadMeetingList();
  },
};
</script>

<style lang="scss" scoped>
.content-wage {
  padding: 90px 30px 30px 30px !important;
  .wage-menu {
    margin-bottom: 30px;
  }
  .wage-table {
    margin-top: 25px;
  }
  .wage-add-pagination {
    margin-top: 20px;
  }
}
</style>
